3. 1) Plug-and-Play
⢠Drop in a âcalendar widgetâ or âtabbed
navigationâ
⢠Little, to no, JavaScript experience required.
⢠Just customize some options and go.
⢠No ďŹexibility.
4. 2) Some Assembly
Required
⢠Write common utilities
⢠Click a link, load a page via Ajax
⢠Build a dynamic menu
⢠Creating interactive forms
⢠Use pre-made code to distance yourself
from browser bugs.
⢠Flexible, until you hit a browser bug.
5. 3) Down-and-Dirty
⢠Write all JavaScript code from scratch
⢠Deal, directly, with browser bugs
⢠Quirksmode is your lifeline
⢠Excessively ďŹexible, to the point of
hinderance.
6. What weâve just seen...
⢠Widgets
⢠Libraries
⢠Raw JavaScript
7. What weâve just seen...
⢠Widgets
⢠Libraries
⢠Raw JavaScript
8. Why use a library?
⢠Makes JavaScript bearable
⢠Gets the job done fast
⢠SimpliďŹes cross-browser support
⢠Sort of like C stdlib - no one just codes all
of C by hand
9. What kind of libraries exist?
Open Source Commercial
Atlas
Client/ AjaxCFC
Backbase for
Server Qcodo
Struts
Prototype
Browser jQuery Backbase
Only Yahoo UI SmartClient
Dojo
10. What kind of libraries exist?
Open Source Commercial
Atlas
Client/ AjaxCFC
Backbase for
Server Qcodo
Struts
Prototype
Browser jQuery Backbase
Only Yahoo UI SmartClient
Dojo
11. Open Source Libraries
Browser Only Client/Server
Scriptaculous
Task AjaxCFC
moo.fx
SpeciďŹc Qcodo
Open Rico
Prototype
General jQuery Ruby on Rails
Purpose Yahoo UI CakePHP
Dojo
12. Open Source Libraries
Browser Only Client/Server
Scriptaculous
Task AjaxCFC
moo.fx
SpeciďŹc Qcodo
Open Rico
Prototype
General jQuery Ruby on Rails
Purpose Yahoo UI CakePHP
Dojo
19. Prototype: Overview
⢠Started early 2005 by Sam Stephenson
⢠Incredibly popular, tied with Ruby on Railsâ
popularity
⢠Development backed by 37 Signals
20. Prototype: Focus
⢠Improving the usability of the JavaScript
language
⢠Big emphasis on adding in âmissingâ
JavaScript features
⢠Clean structure, clean objects and âclassesâ
21. Prototype: Details
⢠Code quality is fantastic, great features
⢠All animations (and interactions) are in
Scriptaculous
⢠Updated frequently
⢠Looking at Prototype 1.6.0.2
23. jQuery: Overview
⢠Released January 2006 by John Resig
⢠Rapid rise in popularity
⢠Many developers across the globe
24. jQuery: Focus
⢠Improving the interaction between
JavaScript and HTML
⢠Finding elements then performing actions
⢠Highly-effective, short, code
25. jQuery: Details
⢠Core features are limited to DOM, Events,
Effects, Ajax
⢠Other features can be added in via plugins
⢠Looking at jQuery 1.2.6
27. YUI: Overview
⢠Released Feb 2006 by Yahoo!
⢠Maintained and ďŹnanced internally
⢠Attempt to standardize internal JavaScript
⢠Say âhiâ to Nate Koechley!
28. YUI: Focus
⢠Exposing, and solving, common
methodologies
⢠Looking for common idioms (Drag-and-
Drop, Calendar, Auto-Complete)
⢠Looking at Yahoo UI 2.5.1
30. Dojo: Overview
⢠Started early 2005 by Alex Russell + Co.
⢠Large development community
⢠Lots of corporate backing (IBM, AOL)
⢠Big code base, tons of features
31. Dojo: Focus
⢠Building complete web applications
⢠A package heirarchy, e.g.:
dojo.addClass( ... )
⢠Focus has transcended into widgets (Dijit)
⢠Huge number of features
⢠Today weâre looking at Dojo 1.1.1
38. Code Base
⢠Core Functionality
⢠DOM
⢠Events
⢠Ajax
⢠Animations
⢠User Interface Widgets
39. Core Functionality
⢠Bare minimum needed to make a dynamic
âAjaxâ web site:
⢠DOM (Traversal and Manipulation)
⢠Events
⢠Ajax
⢠Animations
40. DOM
⢠Traversal
⢠Using CSS selectors to locate elements
⢠ModiďŹcation
⢠Create/remove/modify elements
⢠Having a DOM builder is important
42. DOM ModiďŹcation
⢠Prototype:
Insertion.Bottom(âlistâ,â<li>Another item</li>â);
⢠jQuery:
$(â#liâ).append(â<li>An item</li>â);
⢠Dojo and Yahoo UI have weak support - no DOM
building capabilities, basic property modiďŹcation
43. Events
⢠Support for simple event binding/removal
⢠Support for custom events is essential
⢠Prototype:
Event.observe(âbuttonâ,âclickâ, function(){
alert(âThanks for the click!â);
});
⢠jQuery:
$(âdivâ).click(function(){
alert(âdiv clickedâ);
});
48. Ajax (cont.)
⢠jQuery is only one capable of doing DOM
traversing over XML
⢠jQuery.get(âtest.xmlâ, function(xml){
$(âuserâ, xml).each(function(){
$(â<li/>â).text( $(this).text() )
.appendTo(â#userlistâ);
});
});
49. Animations
⢠Simple animations (hide/show/toggle)
⢠Provide elegant transitions
⢠No animations in Prototype Core (see
Scriptaculous, instead)
⢠jQuery:
$(â#menuâ).slideDown(âslowâ);
51. Core Feature Summary
DOM Events Anim. Ajax
Prototype X X - X
jQuery X X X X
Yahoo UI / X X X
Dojo / X X X
52. User Interface Widgets
⢠DifďŹcult to implement components, made
easy
⢠Commonly used, save duplication
⢠Some common components:
Drag & Drop, Tree, Grid, Modal Dialog,
Tabbed Pane, Menu / Toolbar, Datepicker,
Slider
53. User Interface Packages
⢠Only looking at ofďŹcially-supported code:
⢠Prototype has Scriptaculous
⢠jQuery has jQuery UI
⢠Dojo has Dijit
⢠Included in Yahoo UI
54. Drag & Drop
⢠Drag an item from one location and drop in
an other
⢠Supported by all libraries
55. Tree
⢠A navigable hierarchy
(like a folder/ďŹle
explorer)
⢠In Dojo and Yahoo UI
56. Grid
⢠An advanced table (resizable, editable, easily
navigable)
⢠In Dojo and Yahoo UI
57. Modal Dialog
⢠Display conďŹned content (usually drag &
droppable) and conďŹrmation dialogs
⢠In Dojo,Yahoo UI, and jQuery
58. Tabbed Pane
⢠Multiple panes of content navigable by a
series of tabs
⢠In Dojo,Yahoo UI, and jQuery
59. Menu / Toolbar
⢠A list of navigable items (with sub-menus)
⢠In Dojo and Yahoo UI
60. Datepicker
⢠An input for selecting a
date (or a range of
dates)
⢠In Dojo,Yahoo UI, and
jQuery
61. Slider
⢠A draggable input for entering a general,
numerical, value
⢠In all libraries
63. Themeing
⢠A consistent look-and-feel for widgets
⢠jQuery,Yahoo UI, and Dojo provide
themeing capabilities
⢠jQueryâs and Yahoo UIâs are documented
64. Accessibility
⢠Taking in to consideration points from
ARIA (Accessible Rich Internet
Applications)
⢠Dojo is taking a solid lead, here
⢠jQuery received funding and is working on
ARIA integration to jQuery UI
66. Architecture
⢠Bottom Up (Prototype, jQuery)
vs. Top Down (Dojo,Yahoo UI)
⢠jQuery, Dojo, and Yahoo UI all use a single
namespace
⢠Prototype extends native objects (high
likelihood of inter-library conďŹict)
⢠jQuery is extensible with plugins
⢠Dojo uses a package system
67. Licensing
⢠All use liberal licenses (âKeep my name on
the ďŹle, donât sue me.â)
⢠MIT:
Prototype, jQuery
⢠BSD:
Yahoo UI, Dojo
68. Browser Support
⢠Everyone supports:
IE 6+, Firefox 2+, Safari 2+, Opera 9+
⢠Note:
⢠Most are in the process of dropping
support for Safari 2
69. File Size
⢠Serving your JavaScript miniďŹed + Gzipped
⢠Optimal level of compression and speed
⢠Core ďŹle size (in KB):
35.00
26.25
17.50
8.75
0
Prototype jQuery Yahoo UI Dojo
71. Development Team
⢠Prototype, jQuery, and Dojo all have open
development (anyone can contribute)
⢠jQuery,Yahoo UI, and Dojo all have paid,
full-time, developers working on the code
⢠All have paid, part-time, developers
72. SVN / Bug Tracker
⢠Prototype, jQuery, and Dojo all have code
in a public SVN repositories
⢠Yahoo UIâs development is private and is
limited to Yahoo employees
⢠Theyâre working to ďŹx this!
⢠All libraries have a public bug tracker
73. Unit Tests
⢠All libraries have some automated unit
tests
⢠jQuery,Yahoo UI, and Dojo all have public
unit test URLs
⢠jQuery and Dojo have tests that can run in
Rhino
75. API Documentation
⢠Prototype, jQuery, and Yahoo UI all have full
coverage
⢠jQuery provides runnable examples with
each API item
⢠Dojoâs coverage is improving - work in
progress (dojocampus.org, etc.)
76. Tutorials
⢠All libraries provide some tutorials
⢠jQuery,Yahoo UI, and Dojo have
screencasts/presentations
⢠Prototype: 6
⢠jQuery: 118 (English)
⢠Yahoo UI: Numerous (each component has
at least one)
⢠Dojo: 24
77. Books
⢠Prototype:
⢠Prototype and Scriptaculous in Action (Manning)
⢠Prototype and Scriptaculous (Pragmatic)
⢠jQuery:
⢠Learning jQuery (Packt)
⢠jQuery Reference Guide (Packt)
⢠Yahoo UI:
⢠Learning the Yahoo UI Library (Packt)
⢠Dojo: 3 books coming in 2008
78. Demos
⢠Yahoo UI provides a considerable number
of live demos and examples for all features
⢠jQuery provides live examples and a few
demo applications
⢠Dojo provides demo applications for their
widgets
80. Mailing List / Forum
⢠Prototype, jQuery, and Yahoo UI have
mailing lists
⢠Prototype: 23 posts/day
⢠jQuery: 76 posts/day
⢠Yahoo UI: 56 posts/day
⢠Dojo has an active forum
81. Support and Training
⢠Dojo provides paid support and training
(via Sitepen)
⢠jQuery provides paid jQuery UI support
and training (via Liferay)